<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%String basepath = request.getContextPath(); %>
<%String nick = (String)session.getAttribute("user"); %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>蜂流器 - 任务管理</title>
    <meta name="description" content="">
    <meta name="author" content="templatemo">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,700' rel='stylesheet'
          type='text/css'>
    <link href="<%=basepath%>/css/font-awesome.min.css" rel="stylesheet">
    <link href="<%=basepath%>/css/bootstrap.min.css" rel="stylesheet">
    <link href="<%=basepath%>/css/templatemo-style.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        .modalDialog {
            position: fixed;
            font-family: Arial, Helvetica, sans-serif;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.8);
            z-index: 99999;
            opacity: 0;
            -webkit-transition: opacity 400ms ease-in;
            -moz-transition: opacity 400ms ease-in;
            transition: opacity 400ms ease-in;
            pointer-events: none;
        }

        .modalDialog:target {
            opacity: 1;
            pointer-events: auto;
        }

        .modalDialog > div {
            width: 400px;
            position: relative;
            margin: 10% auto;
            padding: 5px 20px 13px 20px;
            border-radius: 10px;
            background: #fff;
            background: -moz-linear-gradient(#fff, #999);
            background: -webkit-linear-gradient(#fff, #999);
            background: -o-linear-gradient(#fff, #999);
        }

        .close {
            background: #606061;
            color: #FFFFFF;
            line-height: 25px;
            position: absolute;
            right: -12px;
            text-align: center;
            top: -10px;
            width: 24px;
            text-decoration: none;
            font-weight: bold;
            -webkit-border-radius: 12px;
            -moz-border-radius: 12px;
            border-radius: 12px;
            -moz-box-shadow: 1px 1px 3px #000;
            -webkit-box-shadow: 1px 1px 3px #000;
            box-shadow: 1px 1px 3px #000;
        }

        .close:hover {
            background: #00d9ff;
        }
    </style>
</head>
<body>

<div class="templatemo-flex-row">
    <div class="templatemo-sidebar">
        <header class="templatemo-site-header">
            <h1>蜂流器</h1>
        </header>
        <div class="profile-photo-container">
            <center><img src="<%=basepath%>/img/profile-photo.png" alt="Profile Photo" class="img-responsive"></center>
        </div>
        <br>
        <div class="mobile-menu-icon">
            <i class="fa fa-bars"></i>
        </div>
        <nav class="templatemo-left-nav">
            <ul>
                <li><a href="<%=basepath%>/index.jsp" class="active"><i class="fa fa-database fa-fw"></i>任务管理</a></li>
                <li><a href="<%=basepath%>/step1.jsp"><i class="fa fa-database fa-fw"></i>&nbsp;&nbsp;&nbsp;&nbsp;-1.选择目标数据库</a>
                </li>
                <li><a href="<%=basepath%>/step2.jsp"><i class="fa fa-database fa-fw"></i>&nbsp;&nbsp;&nbsp;&nbsp;-2.选择开放表与列</a>
                </li>
                <li><a href="<%=basepath%>/step3.jsp"><i class="fa fa-database fa-fw"></i>&nbsp;&nbsp;&nbsp;&nbsp;-3.确认上传</a>
                </li>
            </ul>
        </nav>
    </div>
    <div class="templatemo-content col-1 light-gray-bg" id="contentBox">
        <!-- navi -->
        <div class="templatemo-top-nav-container">
            <div class="row">
                <nav class="templatemo-top-nav col-lg-12 col-md-12">
                    <ul class="text-uppercase">
                        <li><a class="active" onclick="">管理任务</a></li>
                    </ul>
                </nav>
            </div>
        </div>
        <!-- main content -->
        <br/>
        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-body">
                <br/>
                <button type="button" class="btn btn-info" onclick="createTask()">添加任务+</button>
                <button type="button" class="btn btn-success" style="margin-left: 20px" onclick="startOrStopAllTask(1)">
                    启动所有任务
                </button>
                <button type="button" class="btn btn-danger" style="margin-left: 20px" onclick="startOrStopAllTask(0)">
                    停止所有任务
                </button>
                <p style="color:red;margin-top: 10px">*您可以在这里添加,执行和终止任务</p>
            </div>
        </div>
        <!-- Table -->
        <table class="table table-hover" style="margin-top: 30px">
            <thead>
            <tr>
                <th>#</th>
                <th>服务器ip:端口号</th>
                <th>数据库名称</th>
                <th>数据库类型</th>
                <th>公司名称</th>
                <th>任务描述</th>
                <th>是否回溯</th>
                <th>执行时间点</th>
                <th>当前状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="taskBody"></tbody>
        </table>
        <footer class="text-right">
            <p>Copyright &copy; 2016 语义信息科技有限公司
                | Designed by <a href="http://www.usources.cn" target="_blank">USources</a></p>
        </footer>
    </div>
</div>
<div>
</div>
<!-- JS -->
<script type="text/javascript" src="<%=basepath%>/js/jquery-2.1.0.min.js"></script>      <!-- jQuery -->
<script type="text/javascript" src="<%=basepath%>/js/templatemo-script.js"></script>      <!-- Templatemo Script -->
<script type="text/javascript">
    function createTask() {
        window.location.href = "<%=basepath%>/step1.jsp";
    }
    function startOrStopAllTask(e) {
        $.ajax({
            type: "GET",
            url: "<%=basepath%>/task/startOrStopAll?status=" + e,
            data: {},
            success: function (result) {
                if (result == 0) {
                    alert("参数丢失!");
                } else if (result == 1) {
                    alert("执行成功!");
                    getTasks();
                } else if (result == 5){
                    alert("未找到可操作任务!");
                }else{
                    alert("执行失败!");
                }
            },
            error: function (e) {
                console.log(e);
                alert("执行出现错误!");
            }
        });
    }
    function deleteTask(e) {
        if (confirm("确认删除这个任务吗?")) {
            var taskId = $(e).next().val();
            $.ajax({
                type: "GET",
                url: "<%=basepath%>/task/del?taskId=" + taskId,
                data: {},
                success: function (result) {
                    if (result == 0) {
                        alert("参数丢失");
                    } else if (result == 1) {
                        alert("删除成功!");
                        getTasks();
                    } else {
                        alert("删除任务出现错误!");
                    }
                },
                error: function (e) {
                    console.log(e);
                    alert("删除任务出现错误!");
                }
            });
        }
    }
    function startOrStopTask(e) {
        var taskId = $(e).parent().next().children().eq(1).val();
        var status = $(e).next().val();
        $.ajax({
            type: "GET",
            url: "<%=basepath%>/task/updateStatus?taskId=" + taskId + "&status=" + status,
            data: {},
            success: function (result) {
                if (result == 0) {
                    alert("参数丢失或错误");
                } else if (result == 1) {
                    alert("执行成功!");
                    getTasks();
                } else {
                    alert("执行出现错误!");
                }
            },
            error: function (e) {
                console.log(e);
                alert("执行出现错误!");
            }
        });
    }
    function getTasks() {
        $.ajax({
            type: "GET",
            url: "<%=basepath%>/task/list",
            data: {},
            success: function (result) {
                $("#taskBody").empty();
                if (result.length == 0) {
                    $("#taskBody").append("<h3 style='text-align: center;'><b>数据为空!</b></h3>");
                }
                for (var i in result) {
                    var dbType = "未知";
                    if (result[i].dbType == 1) {
                        dbType = "MySql";
                    } else if (result[i].dbType == 2) {
                        dbType = "PostGres";
                    } else if (result[i].dbType == 3) {
                        dbType = "Oracle";
                    }
                    var status = "<button type='button' class='btn btn-danger' onclick='startOrStopTask(this)'>已停止,点击运行</button><input type=text style='display:none' value='1' />";
                    if (result[i].status == 1) {
                        status = "<button type='button' class='btn btn-success' onclick='startOrStopTask(this)'>运行中,点击停止</button><input type=text style='display:none' value='0' />";
                    }
                    var excuteTime = "未知";
                    if (result[i].excuteFreq == 0) {
                        excuteTime = "24点";
                    } else if (result[i].excuteFreq == 1) {
                        excuteTime = "上午2点";
                    } else if (result[i].excuteFreq == 2) {
                        excuteTime = "上午4点";
                    } else if (result[i].excuteFreq == 3) {
                        excuteTime = "上午6点";
                    }
                    var backTrackable = "否";
                    if(result[i].backTrackable){
                        backTrackable = "是";
                    }
                    var id = parseInt(i) + 1;
                    $("#taskBody").append("<tr><td>" + id + "</td><td>" + result[i].ipAddress + ":" + result[i].portNo + "</td><td>"
                            + result[i].dbName + "</td><td>" + dbType + "</td><td>" + result[i].companyName + "</td><td>"+result[i].description+"</td><td>"+backTrackable+"</td><td>" + excuteTime +
                            "</td><td>" + status + "</td><td><button type='button' class='btn btn-info' onclick='deleteTask(this)'>删除</button>" +
                            "<input type=text style='display:none' value='" + result[i].id + "' /></td></tr>");
                }
            },
            error: function (e) {
                console.log(e);
                alert("获取任务列表出现错误");
            }
        });
    }
    $(document).ready(function () {
        var nick = '<%=nick%>';
        if(!nick || nick == 'null') location.href = "login.jsp";
        getTasks();
    });
</script>
</body>
</html>